<template>
	<view>
		<view class="topbar">
			<view class="toptext" style="color: #F3F6FD;">
				<text style="font-size: 60rpx;  display: block;">您好，</br></text>
				<text style="font-size: 35rpx;  display: block;margin-top: 30rpx;">欢迎登录车联网服务！</text>
			</view>
			<image src="/static/kun/login/组 6@2x.png"></image>
		</view>
		<view class="login">
			<view @click="usePassword=!usePassword" style="text-align: center;">
				<text v-show="!usePassword" style="color: #4E97F2;">验证码登录</text>
				<text v-show="usePassword" style="color: #1564E6;">密码登录</text>
			</view>
			<view class="input" v-show="!usePassword">
				<u--input placeholder="手机号登录" style="height: 50rpx;" border="bottom" :disabled="isLogin"
					clearable></u--input>
				<u-input border="bottom" style="height: 50rpx;" :disabled="isLogin" placeholder="请输入验证码">
					<template slot="suffix">
						<u-button type="primary" style="border-radius: 50rpx; background-color: #4E97F2; color: white;"
							:disabled="isLogin">获取验证码</u-button>
					</template>
				</u-input>

				<u-button type="primary"
					style="border-radius: 50rpx; background-color: #1564E6; color: white; margin-top: 80rpx;"
					:disabled="isLogin">登录</u-button>
			</view>

			<view class="input" v-show="usePassword">
				<u--input placeholder="用户名/手机号/邮箱登录" style="height: 50rpx;" border="bottom" v-model="loginForm.username"
					:disabled="isLogin" clearable></u--input>
				<u-input border="bottom" password style="height: 50rpx;" placeholder="请输入密码" v-model="loginForm.password"
					:disabled="isLogin"></u-input>


				<u-button type="primary"
					style="border-radius: 50rpx; background-color: #1564E6; color: white; margin-top: 80rpx;"
					@click="customerLogin()" :disabled="isLogin">登录</u-button>
			</view>
			<u-button type="success"
				style="width: 80%; border-radius: 50rpx; background-color: #1bd66c; color: white;margin-top: 20rpx;"
				@click="toRegist()" :disabled="isLogin">注册</u-button>
		</view>

	</view>
</template>

<script setup>
	import request from '@/uitls/request.js'
	export default {
		data() {
			return {
				usePassword: true,
				loginForm: {
					username: 'customer111',
					password: '123456'
				},
				phone: null,
				username: null,
				isLogin: false,
				// data中定义对象
				ws: null, // WebSocket 实例
			}
		},
		methods: {
			toRegist() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			customerLogin() {
				this.isLogin = true;
				const that = this;
				request({
					url: '/auth/customerLogin',
					method: 'POST',
					data: this.loginForm,
					success(res) {
						// console.log(res.data)
						const result = res.data;

						// console.log(result.code)
						if (result.code == 200) {
							uni.setStorageSync('token', result.msg);
							uni.setStorageSync('userInfo', result.data);
							const userInfo = uni.getStorageSync('userInfo')
							console.log(userInfo)
							if (userInfo) {
								//链接webscoket
								// that.createWebSocket();
								uni.showToast({
									title: '登陆成功',
									duration: 2000,
									complete: () => { // Toast 显示完成后执行
										uni.switchTab({
											url: '/pages/index/index'
										})
										that.isLogin = false;
									}
								})
							} else {
								uni.showToast({
									title: '用户信息存储失败',
									icon: 'none'
								})
								that.isLogin = false;
							}
						} else {
							uni.showToast({
								title: result.msg || '用户名或密码错误',
								icon: 'none'
							})
							that.isLogin = false;
						}

					}
				})
			},
			createWebSocket() {
				const userId = uni.getStorageSync("userInfo").id;
				this.ws = new WebSocket("ws://localhost:9440/newMessage/" + userId);
				// 将 WebSocket 实例挂载到全局（通过 getApp()）
				getApp().globalData.ws = this.ws;
				//监听
				this.ws.onopen = () => {
					console.log("链接成功")
				}
				// 持久化监听并转发到全局事件总线
				this.ws.onmessage = (event) => {
					uni.$emit('GLOBAL_WS_MESSAGE', event.data); // 关键点：使用强命名事件
				};
				// 监听 WebSocket 消息事件
				// this.ws.onmessage = (event) => {
				// 	const data = event.data;
				// 	console.log('收到 WebSocket 消息:', data);
				// 	// 处理接收到的数据
				// }
			}
		},
		mounted() {}
	}
</script>

<style>
	.input {
		width: 80%;
		padding-top: 120rpx;
		margin: auto;
	}

	.topbar {
		width: 100%;
		/* 或具体像素值 */
		height: 230px;
		/* 或具体像素值 */
		background-image: url("/static/images/组 8.png");
		position: relative;
	}

	.toptext {
		padding: 180rpx 90rpx;
	}

	.topbar image {
		top: 220rpx;
		left: 390rpx;
		position: absolute;
		height: 250rpx;
		width: 320rpx;
		z-index: 2;
	}

	.login {
		z-index: 1;
		width: 100%;
		height: 1000rpx;
		margin: -50rpx auto;
		background-color: #FFFFFF;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		position: relative;
	}
</style>